<template>
    <van-nav-bar title="拼团详情" left-text="" left-arrow @click-left="goBack" />
    <!-- 进度条 -->
    <div class="box">
        <van-circle v-model:current-rate="currentRate" :rate="currentRate" :speed="100" :text="text" size="200px"
            :color="gradientColor" />
    </div>
    <div class="box_time">
        <van-count-down :time="time" format="HH 时 mm 分 ss 秒" />
    </div>
    <van-card :price="info.product.team" :thumb="info.product.thumbs_text" @click-thumb="toPages(info.proid)">
        <template #title>
            <h3>{{ info.product.name }}</h3>
        </template>
        <template #desc>
            <div>人数： <span style="color: red;"> {{ info.total }} </span>人</div>
            <div> 拼团时间：{{ info.createtime_text }} (开始) ~ {{ info.endtime_text }} (结束)</div>
        </template>
    </van-card>
    <div class="item" v-for="(item, index) in teamlist" :key="item.id">
        <van-image width="50px" height="50px" fit="cover" :src="item.business.avatar_text" />
        <div class="info">
            <div class="nickname" v-if="index == 0">{{ item.business.nickname }} (发起人)</div>
            <div class="nickname" v-else>{{ item.business.nickname }}</div>
            <div class="time">拼单时间：{{ item.createtime }}</div>
        </div>
    </div>
    <div class="actions">
        <van-button type="danger" size="large" @click="to(info.proid, info.id)">参与拼团</van-button>
        <van-button type="warning" size="large" @clck="toPages">发起拼团</van-button>
    </div>
</template>
<script setup>
const { proxy } = getCurrentInstance()
const LoginUser = reactive(proxy.$cookies.get('LoginUser'));
const goBack = () => {
    proxy.$router.push('/team/index')
}
const teamid = ref(proxy.$route.query.teamid ?? 0)
const text = ref('拼团进度：100%')
const currentRate = ref(10);
const gradientColor = {
    '0%': '#3fecff',
    '100%': '#6149f6',
};
const info = ref({
    product: {}
})
const time = ref(30 * 60 * 60 * 1000)
const teamlist = ref([])
const teamlists = ref([])
onBeforeMount(() => {
    getIndexData()
})
const getIndexData = async () => {
    let result = await Api.TeamInfo({
        teamid: teamid.value
    })
    if (result.code == 1) {
        info.value = result.data.teaminfo
        teamlist.value = result.data.teamlist

        currentRate.value = teamlist.value.length * 100 / info.value.total
        // 进度
        text.value = `拼团进度：${currentRate.value}%`

        let createtime = parseInt(Date.now() / 1000);
        // 倒计时
        time.value = info.value.endtime - createtime
    }
}
const toPages = (proid) => {
    proxy.$router.push({
        path: '/product/info',
        query: {
            proid: proid
        }
    })
}
const to = (proid, teamid) => {
    proxy.$router.push({
        path: '/product/info',
        query: {
            proid: proid,
            teamid: teamid
        }
    })
}
</script>
<style scoped>
.box {
    width: 100%;
    padding-top: 20px;
    text-align: center;
}

.item {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    padding-left: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.item .info {
    margin-left: 10px;
}

.item .info .nickname,
.item .info .time {
    font-size: 16px;
    font-weight: bold;
}

.actions {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}

.van-button {
    border-radius: 0;
}

:deep .van-circle__text {
    font-size: 20px;
}

.box_time {
    font-size: 20px;
    text-align: center;
    line-height: 45px;
}

:deep .van-count-down {
    font-size: 20px;
    text-align: center;
    line-height: 45px;
}
</style>